<template>
  <div class="corpPaper">
    <header>
      <div style="flex:1">
        <Select
          width="195px"
          v-model="ti"
          placeholder="题库">
          <Option
            v-for="ti of tiku"
            :key="ti.id"
            :label="ti.name"
            :value="ti.id">
              {{ ti.name }}
          </Option>
        </Select>
        <div class="btn primary" @click="randomTest">随机测试</div>
      </div>
      <input type="text" placeholder="按照企业名称查询" v-model="companyName">
      <div class="btn primary" @click="queryBExam">搜索</div>
    </header>
    <main>
      <div class="card-container">
        <div class="card" v-for="paper of paperData" :key="paper.id" @click="exam(paper.id)">
          <h4>试卷名称：{{ paper.name }}</h4>
          <p>公司名称：{{ paper.companyName }}</p>
          <p>题目数量：{{ paper.num }}</p>
        </div>
      </div>
    </main>
    <footer>
      <Pages
        @setCurPage="setCurPage"
        :curPage="curPage"
        :total="total"
        :pageSize="pageSize"></Pages>
    </footer>
  </div>
</template>
<script>
import Pages from '@/components/Pages/index';
// eslint-disable-next-line camelcase
import api_corpPaper from '@/api/corpPaper';
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';

export default {
  name: 'CorpPaper',
  data() {
    return {
      curPage: 1,
      total: 1000,
      pageSize: 6,
      tiku: [
        {
          id: 'ti1',
          name: 'JAVA基础',
        },
        {
          id: 'ti2',
          name: 'Vue基础',
        },
        {
          id: 'ti3',
          name: 'C基础',
        },
        {
          id: 'ti4',
          name: 'C++基础',
        },
      ],
      ti: '',
      // 模糊条件
      companyName: '',
      // paper
      paperData: [
      ],
    };
  },
  mounted() {
    this.queryBExam();
    this.queryDB();
    this.$emit('route-switch', window.location.href.split('/').pop());
  },
  methods: {
    randomTest() {
      const dbId = this.ti;
      if (!dbId) {
        this.$alert('请选择题库');
        return;
      }
      const param = new URLSearchParams();
      param.append('DBId', dbId);
      param.append('num', 5);
      param.append('userId', sessionStorage.getItem('userId'));
      api_corpPaper.self(param).then(async (res) => {
        this.$router.push({ name: 'Quizz', query: { paperId: res.data.data.businessId, type: 'random' } });
      });
    },
    exam(id) {
      const param = new URLSearchParams();
      param.append('examId', id);
      param.append('userId', sessionStorage.getItem('userId'));
      api_corpPaper.add(param).then(async (res) => {
        this.$router.push({ name: 'Quizz', query: { paperId: res.data.data.businessId, type: 'exam', examId: id } });
      });
    },
    setCurPage(page) {
      this.curPage = page;
      this.queryBExam();
    },
    async queryDB() {
      this.tiku = [];
      const param = new URLSearchParams();
      api_corpPaper.queryDB(param).then(async (res) => {
        const datas = res.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.tiku.push({
            id: datas[i].businessId,
            name: datas[i].name,
          });
        }
      });
    },
    async queryBExam() {
      this.paperData = [];
      const param = new URLSearchParams();
      param.append('companyName', this.companyName);
      param.append('status', '1');
      param.append('rows', this.pageSize);
      param.append('page', this.curPage);
      api_corpPaper.queryBExam(param).then(async (res) => {
        const datas = res.data.rows;
        this.total = res.data.total;
        for (let i = 0; i < datas.length; i += 1) {
          this.paperData.push({
            id: datas[i].examId,
            name: datas[i].examTitle,
            companyName: datas[i].companyName,
            num: datas[i].examQuestionCount,
          });
        }
      });
    },
  },
  components: {
    Pages,
    Select,
    Option,
  },
};
</script>
<style lang="less">
@import url(../../../../static/style/site.vars.less);
.corpPaper {
  box-shadow: 0 3px 6px rgba(6,0,1,.05);
  &>header {
    display: flex;
    justify-content: flex-end;
    background: #fff;
    padding: 15px 28px;
    input {
      margin-right: 10px;
      height: 35px;
    }
    .select {
      height: 35px;
    }
  }
  &>main {
    .card-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      height: 600px;
      background: #fff;
      .card {
        height: 300px;
        width: 33.33%;
        background: #fff;
        box-sizing: border-box;
        padding: 10px 30px;
        cursor: pointer;
        &:hover {
          background: rgba(0, 98, 211, 0.082);
        }
        p {
          margin: 5px 0;
          font-size: 14px;
        }
        h4 {
          margin: 5px 0;
        }
      }
    }
  }
  &>footer {
    background: #fff;
    text-align: center;
    padding: 20px;
  }
}
</style>
